import React, { useState, useEffect } from "react";
import "./User.scss";
import { Button, Space, Table, Tag, Drawer, Form, Input, Checkbox } from "antd";
import { $user, $adduser } from "../../api/index.js";
import { PlusCircleOutlined } from "@ant-design/icons";

export default function User() {
  let [userList, setUserList] = useState([]);
  useEffect(() => {
    $user().then((data) => {
      // data = data.map((row) => {
      //   return {
      //     ...row,
      //     key: row.key,
      //   };
      // });
      setUserList(data[0]);
    });
  }, []);
  const columns = [
    {
      key: "name",
      title: "姓名",
      dataIndex: "name",
      render: (text) => <div>{text}</div>,
    },
    {
      key: "age",
      title: "年龄",
      dataIndex: "age",
    },
    {
      key: "address",
      title: "地址",
      dataIndex: "address",
    },
    {
      key: "tags",
      title: "标签",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "管理员") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button size="small" danger>
            删除
          </Button>
          <Button size="small" type="default">
            编辑 {record.name}
          </Button>
        </Space>
      ),
    },
  ];
  const [open, setOpen] = useState(false);
  let [form] = Form.useForm();
  const onClose = () => {
    setOpen(false);
  };
  const showDrawer = () => {
    setOpen(true);
  };
  const onFinish = async (values) => {
    console.log("Success:", values);
    let data = await $adduser(values);
    form.resetFields();
    console.log(data);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const onChange = (checkedValues) => {
    console.log("checked = ", checkedValues);
  };
  return (
    <>
      <Drawer
        width={400}
        title="添加用户"
        placement="right"
        onClose={onClose}
        open={open}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 20,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            name: "",
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: "请输入姓名!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: "请输入年龄!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="地址"
            name="address"
            rules={[
              {
                required: true,
                message: "请输入地址!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="标签"
            name="tag"
            rules={[
              {
                required: true,
                message: "请输入标签!",
              },
            ]}
          >
            <Checkbox.Group style={{ width: "100%" }} onChange={onChange}>
              <Checkbox value="超级管理员">超级管理员</Checkbox>
              <Checkbox value="管理员">管理员</Checkbox>
              <Checkbox value="用户">用户</Checkbox>
            </Checkbox.Group>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 4,
              span: 20,
            }}
          >
            <Button block type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 4,
              span: 20,
            }}
          >
            <Button
              block
              onClick={() => {
                form.resetFields();
              }}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      <Button className="addBtn" type="primary" onClick={showDrawer}>
        <PlusCircleOutlined />
        添加
      </Button>
      <Table size="small" columns={columns} dataSource={userList} />
    </>
  );
}
